<template>
  <view class="i-index">
    <view class="wrap">
      <CustomHeader />
      <view class="content">
        <view class="solid h-600">
          <swiper
            class="w-100p h-100p"
            indicator-color="#e30c1d"
            indicator-active-color="#ef4817"
            :indicator-dots="true"
            :autoplay="true"
            :interval="3000"
            :duration="500"
          >
            <swiper-item>
              <view class="swiper-item w-100p h-100p">
                <image
                  class="w-100p h-100p"
                  src="/src/static/image/bann1.jpg"
                  mode="aspectFill"
                ></image>
              </view>
            </swiper-item>
            <swiper-item>
              <view class="swiper-item w-100p h-100p">
                <image
                  class="w-100p h-100p"
                  src="/src/static/image/bann2.jpg"
                  mode="aspectFill"
                ></image>
              </view>
            </swiper-item>
            <swiper-item>
              <view class="swiper-item w-100p h-100p">
                <image
                  class="w-100p h-100p"
                  src="/src/static/image/bann3.jpg"
                  mode="aspectFill"
                ></image>
              </view>
            </swiper-item>
            <swiper-item>
              <view class="swiper-item w-100p h-100p">
                <image
                  class="w-100p h-100p"
                  src="/src/static/image/bann4.jpg"
                  mode="aspectFill"
                ></image>
              </view>
            </swiper-item>
            <swiper-item>
              <view class="swiper-item w-100p h-100p">
                <image
                  class="w-100p h-100p"
                  src="/src/static/image/bann5.jpg"
                  mode="aspectFill"
                ></image>
              </view>
            </swiper-item>
          </swiper>
        </view>
        <view class="part p1 h-680">
          <view class="title bg7 p-t-50 p-b-70">
            <view class="h2"> 热门课程 </view>
          </view>
          <view class="main w-710 margin-x-20">
            <view class="ul ul1 flex-between-center">
              <view class="li li1">
                <view class="logo">
                  <image
                    class="w-100p h-100p"
                    src="/src/static/image/one-photo.jpg"
                    mode="aspectFill"
                  ></image>
                </view>
                <view class="text"> 角色动画大师班 </view>
              </view>
              <view class="li li2">
                <view class="logo">
                  <image
                    class="w-100p h-100p"
                    src="/src/static/image/one-photo2.jpg"
                    mode="aspectFill"
                  ></image>
                </view>
                <view class="text"> 视频包装设计师班 </view>
              </view>
              <view class="li li3">
                <view class="logo">
                  <image
                    class="w-100p h-100p"
                    src="/src/static/image/one-photo3.jpg"
                    mode="aspectFill"
                  ></image>
                </view>
                <view class="text"> C4D创意设计班 </view>
              </view>
            </view>
            <view class="ul ul2 flex-between-center">
              <view class="li li1">
                <view class="logo">
                  <image
                    class="w-100p h-100p"
                    src="/src/static/image/one-photo4.jpg"
                    mode="aspectFill"
                  ></image>
                </view>
                <view class="text"> MAYA模型大师班 </view>
              </view>
              <view class="li li2">
                <view class="logo">
                  <image
                    class="w-100p h-100p"
                    src="/src/static/image/one-photo5.jpg"
                    mode="aspectFill"
                  ></image>
                </view>
                <view class="text"> 虚拟场景精英班 </view>
              </view>
              <view class="li li3">
                <view class="logo">
                  <image
                    class="w-100p h-100p"
                    src="/src/static/image/one-photo6.jpg"
                    mode="aspectFill"
                  ></image>
                </view>
                <view class="text"> 影视后期全科班 </view>
              </view>
            </view>
          </view>
        </view>
        <view class="part cs4">
          <view class="title none-bg p-t-50 p-b-50">
            <view class="h2"> 了解时光新影教育 </view>
            <view class="p">
              运用科技和实战，做好影视人才和行业之间的桥梁，实现梦想！
            </view>
          </view>
          <view class="main w-740 m-l-10">
            <view class="li li1">
              <view class="info m-l-360">
                <view class="h2 m-t-80"> 运用科技和实战教学 </view>
                <view class="p"> 助力影视人才实现梦想 </view>
              </view>
            </view>
            <view class="li li2">
              <view class="info m-l-30">
                <view class="h2 m-t-80"> 了解时光新影课程 </view>
                <view class="p"> 专业设计课程特色 </view>
              </view>
            </view>
            <view class="li li3">
              <view class="info m-l-360">
                <view class="h2 m-t-80"> 最新开班信息 </view>
                <view class="p"> 各校区开班时间 </view>
              </view>
            </view>
            <view class="li li4">
              <view class="info m-l-30">
                <view class="h2 m-t-80"> 新影就业员工 </view>
                <view class="p"> 入职薪资待遇 </view>
              </view>
            </view>
          </view>
        </view>
        <view class="part p2">
          <view class="title bg7 p-t-50 p-b-50">
            <view class="h2"> 面授教学 专业疑问及时答 </view>
            <view class="p">
              实战型教学，在项目实训中掌握专业知识，学习效率高
            </view>
          </view>
          <view class="main w-710 margin-x-20">
            <view class="four-size"> 课程适用性广，您不必为自身基础烦恼 </view>
            <view class="ul2 h-280 flex-between-start">
              <view class="li">
                <view class="logo">
                  <image
                    class="w-100p h-100p"
                    src="/src/static/image/new.jpg"
                    mode="aspectFill"
                  ></image>
                </view>
                <view class="text"> 基础人群 </view>
              </view>
              <view class="li">
                <view class="logo">
                  <image
                    class="w-100p h-100p"
                    src="/src/static/image/new2.jpg"
                    mode="aspectFill"
                  ></image>
                </view>
                <view class="text"> 转岗人群 </view>
              </view>
              <view class="li">
                <view class="logo">
                  <image
                    class="w-100p h-100p"
                    src="/src/static/image/new3.jpg"
                    mode="aspectFill"
                  ></image>
                </view>
                <view class="text"> 提升技能 </view>
              </view>
            </view>
          </view>
          <view class="main w-710 margin-x-20">
            <view class="four-size"> 多种班型选择，您不必为上课时间纠结 </view>
            <view class="ul1">
              <view class="li li1">
                <view class="info p-t-6 m-l-352">
                  <view class="h2"> 全日制班 </view>
                  <view class="span"> </view>
                  <view class="p"> 适用于空余<br />时间充裕的人群 </view>
                </view>
              </view>
              <view class="li li2">
                <view class="info p-t-6">
                  <view class="h2"> 暑期班 </view>
                  <view class="span"> </view>
                  <view class="p">
                    适用于在校就读<br />暑假有时间学习人群
                  </view>
                </view>
              </view>
              <view class="li li3">
                <view class="info p-t-6 m-l-352">
                  <view class="h2"> 定制班 </view>
                  <view class="span"> </view>
                  <view class="p">
                    可自由预约上课时间,<br />随时有空随时学
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="link"> 我适合学什么？ </view>
        </view>
        <view class="part p9 h-660">
          <view class="title bg7 p-t-50 p-b-70">
            <view class="h2"> 特色优势 </view>
          </view>
          <view class="main w-710 margin-x-20">
            <view class="ul ul1 flex-evenly-center">
              <view class="ys ys1"> </view>
              <view class="ys ys2"> </view>
              <view class="ys ys3"> </view>
            </view>
            <view class="ul ul2 flex-evenly-center m-t-10">
              <view class="ys ys1"> </view>
              <view class="ys ys2"> </view>
              <view class="ys ys3"> </view>
            </view>
          </view>
          <view class="link"> 预约课程试听 </view>
        </view>
        <view class="part p4">
          <view class="title bg7 p-t-50 p-b-70">
            <view class="h2"> 虚拟工资 </view>
          </view>
          <view class="main w-710 margin-x-20">
            <view class="four-size f-32">
              用薪金奖惩替换学分，逐渐完成从“学生”到“准工作人员”的角色转换，为从业做好准备
            </view>
            <view class="ul">
              <view class="li li1">
                <view class="li-h2"> 迟到、早退、旷课次数等 </view>
              </view>
              <view class="li li2">
                <view class="li-h2"> 课后作业完成情况 </view>
              </view>
              <view class="li li3">
                <view class="li-h2"> 在班级中担任组长、班长 </view>
              </view>
              <view class="li li4">
                <view class="li-h2"> 结业作品完成度 </view>
              </view>
            </view>
            <view class="four-size f-32">
              学期结束综合评估，为学生提供一对一就业规划服务
            </view>
          </view>
          <view class="link"> 了解虚拟工资 </view>
        </view>
        <SwiperV2 :data="data1" />
        <view class="part p10">
          <view class="title bg7 p-t-50 p-b-50">
            <view class="h2"> 挑战一张“封神” 悄悄惊艳众人 </view>
            <view class="p">
              时光新影学员在校学习期间不同课程作品均会得到老师指导、点评，提前打磨必备求职技能，充分做好就业准备
            </view>
          </view>
          <view class="main w-710 margin-x-20">
            <video class="video m-t-75 m-l-68" src=""></video>
          </view>
          <view class="link"> 查看更多学员作品 </view>
        </view>
        <SwiperV2 :data="data2" />
        <view class="part p7 h-650">
          <view class="title bg7 p-t-50 p-b-50">
            <view class="h2"> 合作校企 </view>
            <view class="p"> 合作校企众多，专注培养技术人才 </view>
          </view>
          <view class="main w-710 margin-x-20 p-b-10">
            <image
              class="w-100p"
              src="/src/static/image/gs.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="link"> 查看更多合作校企 </view>
        </view>
        <SwiperV2 :data="data3" />
        <view class="part p71 h-780">
          <view class="title bg7 p-t-50 p-b-70">
            <view class="h2"> 高端教学环境，造就优质人才 </view>
          </view>
          <view class="main flex-wrap flex-around-center">
            <view class="school-img">
              <image
                class="w-100p h-100p"
                src="/src/static/image/school.jpg"
                mode="aspectFill"
              ></image>
            </view>
            <view class="school-img">
              <image
                class="w-100p h-100p"
                src="/src/static/image/school2.jpg"
                mode="aspectFill"
              ></image>
            </view>
            <view class="school-img m-t-20">
              <image
                class="w-100p h-100p"
                src="/src/static/image/school3.jpg"
                mode="aspectFill"
              ></image>
            </view>
            <view class="school-img m-t-20">
              <image
                class="w-100p h-100p"
                src="/src/static/image/school4.jpg"
                mode="aspectFill"
              ></image>
            </view>
          </view>
          <view class="link"> 查看更多校园图片 </view>
        </view>
        <view class="part p93 h-730">
          <view class="title bg8 p-t-50 p-b-70">
            <view class="h2"> 认识时光 了解我们 </view>
          </view>
          <view class="we">
            <view class="open">
              <image
                class="img"
                src="/src/static/image/news1.jpg"
                mode="aspectFill"
              ></image>
              <view class="name5"> 开学典 ... </view>
              <view class="name4"> 未来可期... </view>
              <view class="name3"> 899人浏览 </view>
            </view>
            <view class="open">
              <image
                class="img"
                src="/src/static/image/news2.png"
                mode="aspectFill"
              ></image>
              <view class="name5"> 豆瓣9.2... </view>
              <view class="name4"> 每天上班... </view>
              <view class="name3"> 760人浏览 </view>
            </view>
            <view class="open">
              <image
                class="img"
                src="/src/static/image/news3.jpg"
                mode="aspectFill"
              ></image>
              <view class="name5"> 柏林电 ... </view>
              <view class="name4"> ... </view>
              <view class="name3"> 776人浏览 </view>
            </view>
            <view class="open">
              <image
                class="img"
                src="/src/static/image/news4.jpg"
                mode="aspectFill"
              ></image>
              <view class="name5"> 豆瓣8.9... </view>
              <view class="name4"> 看完记得...... </view>
              <view class="name3"> 899人浏览 </view>
            </view>
          </view>
          <view class="link"> 了解更多行业资讯 </view>
        </view>
        <view class="bottom">
          <view class="biao h-630">
            <view class="title bg8 p-t-50 p-b-70">
              <view class="h2"> 每个时代都在悄悄犒赏努力学习的人 </view>
            </view>
            <form class="diyform">
              <input type="text" placeholder="姓名：" />
              <input type="text" placeholder="电话：" />
              <view class="link"> 获取免费试听名额 </view>
            </form>
          </view>
        </view>
      </view>
    </view>
    <view class="mobile_minchat_div">
      <view class="service">
        <view class="logo">
          <image
            class="img w-100p h-100p"
            src="/static/image/server.png"
            mode="aspectFit"
          ></image>
        </view>
        <view class="text"> 在线咨询 </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import CustomHeader from "@/components/header/index.vue";
import SwiperV2 from "@/components/swiper/index.vue";
const data1 = {
  title: " 学习实训一线知名项目 ",
  text: " 接触百余部商业案例实操，了解影视后期制作过程 ",
  list: [
    {
      img: "/src/assets/index/game1.jpg",
      title: ["你好，李焕英"],
    },
    {
      img: "/src/assets/index/game2.jpg",
      title: ["刺杀小说家"],
    },
    {
      img: "/src/assets/index/game3.jpg",
      title: ["影"],
    },
    {
      img: "/src/assets/index/game4.jpg",
      title: ["宁安如梦"],
    },
    {
      img: "/src/assets/index/game5.jpg",
      title: ["流浪地球2"],
    },
    {
      img: "/src/assets/index/game6.jpg",
      title: ["悬崖之上"],
    },
    {
      img: "/src/assets/index/game7.jpg",
      title: ["长月烬明"],
    },
  ],
  btnText: " 查看更多商业项目 ",
};
const data2 = {
  title: "毕业推荐就业",
  text: "实现职场小白到高水平复合型人才的华丽转身",
  list: [
    {
      img: "/src/assets/index/student1.jpg",
      name: "陈*越 ",
      job: "剪辑师",
      title: [
        "参与项目：《乘风破浪的姐姐2》、",
        "《中餐厅》、《向往的生活》等",
      ],
    },
    {
      img: "/src/assets/index/student2.jpg",
      name: "王*洁 ",
      job: "剪辑师",
      title: ["参与项目：B站红人:鹦鹉梨、", "小关er、酵母X等"],
    },
    {
      img: "/src/assets/index/student3.jpg",
      name: "姜*文 ",
      job: "后期制作",
      title: ["参与项目：宣传片《青山湖论剑》、", "《播种天街等丰收》等"],
    },
    {
      img: "/src/assets/index/student4.jpg",
      name: "储*瑜  ",
      job: "剪辑师",
      title: ["参与项目：亚马逊广告宣传、", "帐篷制作宣传片等"],
    },
    {
      img: "/src/assets/index/student5.jpg",
      name: "任*怡  ",
      job: "设计总监",
      title: [
        "参与项目：《华策中国影视产业国际合作实验区logo演绎》、",
        "《帝洛大健康古树茶》等",
      ],
    },
    {
      img: "/src/assets/index/student6.jpg",
      name: "颜*辉 ",
      job: "特效包装",
      title: ["参与项目：《金华之星》、《阿里云AloT》、", "《沐有话说》等"],
    },
  ],
  btnText: "了解就业服务详情",
};
const data3 = {
  title: "名师面对面授课",
  text: "每天课后答疑，让你能安心学习",
  list: [
    {
      img: "/src/assets/index/t9.jpg",
      name: "陈奕",
      job: "时光坐标创始人",
      title: [
        "《影》、《烈日灼心》、《吹哨人》等影视项目的特效导演;",
        "北京电影学院硕士、中国影视摄影师学会常务理事、",
        "中国电影电视技术协会先进影像专业委员会副主任委员",
      ],
    },
    {
      img: "/src/assets/index/t10.jpg",
      name: "郁刚",
      job: "电影导演",
      title: [
        "毕业于浙江传媒学院文艺编导专业",
        "《同桌的你》执行导演、",
        "科幻电影《流浪地球》Ｂ组导演",
      ],
    },
    {
      img: "/src/assets/index/t11.jpg",
      name: "朱骥明 ",
      job: "首席技术官",
      title: [
        "毕业于浙江科技学院",
        "主要作品：《刺杀小说家》、",
        "《 烈日灼心 》、《追凶者也》",
      ],
    },
    {
      img: "/src/assets/index/t12.jpg",
      name: "李成章  ",
      job: "首席教学官",
      title: [
        "国内资深影视教育专家",
        "主要作品：《影》、",
        "《香蜜沉沉烬如霜》、《烈日灼心》",
      ],
    },
    {
      img: "/src/assets/index/t13.jpg",
      name: "陈严飞  ",
      job: "首席艺术官",
      title: [
        "毕业于浙江传媒学院",
        "主要作品：电影《鬼吹灯之龙岭迷窟》",
        "电视剧《笑傲江湖》《古剑奇谭2》的特效指导",
      ],
    },
  ],
  btnText: "向导师提问",
};
</script>

<style lang="scss" scoped>
.i-index {
  height: 100%;
  .wrap {
    .content {
      .solid {
      }
      .part {
        .link {
          margin: 50rpx auto;
          width: 380rpx;
          height: 62rpx;
          font-size: 30rpx;
          text-align: center;
          line-height: 64rpx;
          display: block;
          color: #fce8da;
          cursor: pointer;
          background: url(/src/static/image/link-bg2.png) no-repeat center;
          background-size: 349rpx 11rpx;
          border: 2rpx solid #fce8da;
          border-radius: 999px;
        }
      }
      .p1 {
        background: url(/src/static/image/p1-bg.jpg) no-repeat top center;
        background-size: 100% 1190rpx;
        overflow: hidden;
        .main {
          .ul {
            .li {
              height: 215rpx;
              .logo {
                width: 231rpx;
                height: 146rpx;
                border: 1px solid #b08f7a;
                box-sizing: border-box;
              }
              .text {
                width: 231rpx;
                font-size: 28rpx;
                margin-top: 14rpx;
                line-height: 30rpx;
                color: #e8e8e8;
                text-align: center;
              }
            }
          }
        }
      }
      .cs4 {
        height: 1340rpx;
        background: url(/src/static/image/cs4-bg.jpg) no-repeat top center;
        background-size: 100% 1380rpx;
        .main {
          .li {
            margin-top: 15rpx;
            width: 730rpx;
            height: 238rpx;
            overflow: hidden;
            .info {
              .h2 {
                font-size: 38rpx;
                color: #feebde;
                line-height: 38rpx;
              }
              .p {
                margin-left: 5rpx;
                margin-top: 20rpx;
                width: 340rpx;
                font-size: 30rpx;
                line-height: 36rpx;
                color: #e8e8e8;
              }
            }
          }
          .li1 {
            background: url(/src/static/image/cs4-img1.png) no-repeat left
              center;
            background-size: 405rpx 238rpx;
            .info {
            }
          }
          .li2 {
            background: url(/src/static/image/cs4-img2.png) no-repeat right
              center;
            background-size: 405rpx 238rpx;
            .info {
            }
          }
          .li3 {
            background: url(/src/static/image/cs4-img3.png) no-repeat left
              center;
            background-size: 405rpx 238rpx;
            .info {
            }
          }
          .li4 {
            background: url(/src/static/image/cs4-img4.png) no-repeat right
              center;
            background-size: 405rpx 238rpx;
            .info {
            }
          }
        }
      }
      .p2 {
        height: 1510rpx;
        background: url(/src/static/image/p4-bg.jpg) no-repeat center;
        background-size: 100% 1510rpx;
        .main {
          .four-size {
            color: #ffffff;
            margin-bottom: 30rpx;
            display: flex;
            justify-content: start;
            font-size: 32rpx;
          }
          .ul2 {
            height: 280rpx;
            .li {
              .logo {
                width: 231rpx;
                height: 146rpx;
                border: 1px solid #b08f7a;
                box-sizing: border-box;
              }
              .text {
                width: 231rpx;
                font-size: 28rpx;
                margin-top: 14rpx;
                line-height: 30rpx;
                color: #e8e8e8;
                text-align: center;
              }
            }
          }
          .ul1 {
            .li {
              height: 228rpx;
              .info {
                width: 358rpx;
                height: 204rpx;
                .h2 {
                  padding-top: 26rpx;
                  padding-left: 16rpx;
                  font-size: 38rpx;
                  font-weight: bold;
                  line-height: 38rpx;
                  color: #feebde;
                }
                .span {
                  margin-top: 22rpx;
                  margin-left: 16rpx;
                  width: 22rpx;
                  height: 3rpx;
                  display: block;
                  background: #e8e8e8;
                }
                .p {
                  padding-top: 16rpx;
                  padding-left: 16rpx;
                  font-size: 30rpx;
                  line-height: 38rpx;
                  color: #e8e8e8;
                }
              }
            }
            .li1 {
              background: url(/src/static/image/new4.png) no-repeat left top;
              background-size: 100% auto;
            }
            .li2 {
              background: url(/src/static/image/new5.png) no-repeat left top;
              background-size: 100% auto;
              text-align: right;
              height: 238rpx;
              .info {
                .h2 {
                  padding-right: 16rpx;
                }
                .span {
                  margin-left: 320rpx;
                  margin-right: 16rpx;
                }
                .p {
                  padding-right: 16rpx;
                }
              }
            }
            .li3 {
              background: url(/src/static/image/new6.png) no-repeat left top;
              background-size: 100% auto;
            }
          }
        }
      }
      .p9 {
        background: url(/src/static/image/p9-bg.jpg) no-repeat top center;
        background-size: 100% 1200rpx;
        .main {
          .ul {
            .ys {
              width: 225rpx;
              height: 140rpx;
            }
          }
          .ul1 {
            .ys1 {
              background: url(/src/static/image/six6.jpg) no-repeat;
              background-size: 225rpx 140rpx;
            }
            .ys2 {
              background: url(/src/static/image/six5.jpg) no-repeat;
              background-size: 225rpx 140rpx;
            }
            .ys3 {
              background: url(/src/static/image/six4.jpg) no-repeat;
              background-size: 225rpx 140rpx;
            }
          }
          .ul2 {
            .ys1 {
              background: url(/src/static/image/six3.jpg) no-repeat;
              background-size: 225rpx 140rpx;
            }
            .ys2 {
              background: url(/src/static/image/six2.jpg) no-repeat;
              background-size: 225rpx 140rpx;
            }
            .ys3 {
              background: url(/src/static/image/six1.jpg) no-repeat;
              background-size: 225rpx 140rpx;
            }
          }
        }
      }
      .p4 {
        height: 1500rpx;
        background: url(/src/static/image/p4-bg.jpg) no-repeat center;
        background-size: 100% 1500rpx;
        .main {
          .four-size {
            color: #fff;
            margin-bottom: 30rpx;
            display: flex;
            justify-content: start;
          }
          .ul {
            .li {
              margin-bottom: 14rpx;
              width: 664rpx;
              height: 216rpx;
              overflow: hidden;
              .li-h2 {
                margin-top: 90rpx;
                margin-left: 209rpx;
                font-size: 38rpx;
                line-height: 38rpx;
                color: #feebde;
              }
            }
            .li1 {
              background: url(/src/static/image/p4-li1.png) no-repeat center;
              background-size: 664rpx 216rpx;
            }
            .li2 {
              background: url(/src/static/image/p4-li2.png) no-repeat center;
              background-size: 664rpx 216rpx;
            }
            .li3 {
              background: url(/src/static/image/p4-li3.png) no-repeat center;
              background-size: 664rpx 216rpx;
            }
            .li4 {
              background: url(/src/static/image/p4-li4.png) no-repeat center;
              background-size: 664rpx 216rpx;
            }
          }
        }
      }
      .p91 {
        height: 1200rpx;
        background: url(/src/static/image/p9-bg.jpg) no-repeat top center;
        background-size: 100% 1200rpx;
        .main {
        }
      }
      .p10 {
        height: 1000rpx;
        background: url(/src/static/image/p10-bg.jpg) no-repeat center;
        background-size: 100% 1000rpx;
        .main {
          .video {
            width: 573rpx;
            height: 444rpx;
          }
        }
      }
      .p92 {
        height: 1100rpx;
        background: url(/src/static/image/p9-bg.jpg) no-repeat top center;
        background-size: 100% 1110rpx;
        .main {
        }
      }
      .p7 {
        background: url(/src/static/image/p7-bg.jpg) no-repeat top center;
        background-size: 100% 1050rpx;
        .main {
        }
      }
      .p-teach {
        .main {
          .swiper-container {
          }
          .left {
            z-index: 9999;
            background: url(/src/static/image/left.png) no-repeat;
            background-size: cover;
          }
          .right {
            z-index: 9999;
            background: url(/src/static/image/right.png) no-repeat;
            background-size: cover;
          }
        }
      }
      .p71 {
        background: url(/src/static/image/p7-bg.jpg) no-repeat top center;
        background-size: 100% 1090rpx;
        .main {
          margin: 0 auto;
          width: 710rpx;
          .school-img {
            width: 48%;
            height: 194rpx;
            box-sizing: border-box;
            border: 1px solid #ddd;
            border-image: -webkit-linear-gradient(#9356ff, #375dd6) 20 20;
            border-image: -moz-linear-gradient(#9356ff, #375dd6) 20 20;
            border-image: -o-linear-gradient(#9356ff, #375dd6) 20 20;
            border-image: linear-gradient(#9356ff, #375dd6) 20 20;
          }
        }
      }
      .p93 {
        background: url(/src/static/image/p9-bg.jpg) no-repeat top center;
        background-size: 100% 840rpx;
        .we {
          display: flex;
          justify-content: space-around;
          margin: 0 auto;
          width: 710rpx;
          .open {
            background: #ffffff;
            padding: 10rpx;
            margin: 10rpx;
            flex: 1;
            .img {
              width: 100%;
              height: 104rpx;
              margin-bottom: 10rpx;
            }
            .name5 {
              color: #333;
              text-align: left;
              margin-bottom: 10rpx;
              font-size: 30rpx;
              font-weight: bold;
            }
            .name4 {
              color: #333;
              text-align: left;
              font-size: 10rpx;
              margin-bottom: 10rpx;
            }
            .name3 {
              color: #cdd0e6;
              font-size: 20rpx;
              text-align: left;
              margin-bottom: 10rpx;
            }
          }
        }
      }
      .bottom {
        .biao {
          background: url(/src/static/image/p9-bg.jpg) no-repeat top center;
          background-size: 100% 1030rpx;
        }
        .diyform {
          input {
            display: block;
            width: 60%;
            height: 60rpx;
            line-height: 60rpx;
            margin: 0 auto;
            margin-bottom: 20rpx;
            border-radius: 999px;
            padding: 2rpx 0rpx;
            padding-left: 50rpx;
            outline: medium;
            background-color: #ffffff;
            border-width: 4rpx;
            border-style: inset;
            border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
            border-image: initial;
            font-size: 26rpx;
          }
          .link {
            margin: 50rpx auto;
            width: 380rpx;
            height: 62rpx;
            font-size: 30rpx;
            text-align: center;
            line-height: 64rpx;
            display: block;
            color: #fce8da;
            cursor: pointer;
            background: url(/src/static/image/link-bg2.png) no-repeat center;
            background-size: 349rpx 11rpx;
            border: 2rpx solid #b5947f;
            border-radius: 999px;
          }
        }
      }
      .title {
        background: url(/src/static/image/title-bg.png) no-repeat center 60rpx;
        background-size: 710rpx 72rpx;
        .h2 {
          font-size: 41rpx;
          line-height: 50rpx;
          text-align: center;
          font-weight: bold;
          background-image: -webkit-gradient(
            linear,
            0 0,
            0 bottom,
            from(#fde9da),
            to(#b08f79)
          );
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .p {
          margin-top: 20rpx;
          font-size: 30rpx;
          line-height: 40rpx;
          text-align: center;
          color: #feebde;
          width: 75%;
          margin-left: auto;
          margin-right: auto;
        }
      }
      .bg8 {
        background: url(/src/static/image/title-bg8.png) no-repeat center 60rpx;
        background-size: 710rpx 72rpx;
      }
      .bg7 {
        background: url(/src/static/image/title-bg7.png) no-repeat center 60rpx;
        background-size: 710rpx 72rpx;
      }
      .none-bg {
        background: none;
      }
    }
  }
  .mobile_minchat_div {
    font-size: 20rpx;
    z-index: 1000000;
    position: fixed;
    bottom: 0rpx;
    height: 100rpx;
    width: 100%;
    display: block;
    .service {
      font-size: 1em;
      width: 100%;
      height: 100%;
      background: #3652e0;
      color: #ffffff;
      float: left;
      text-align: center;
      padding: 0 0.8em;
      line-height: 100%;
      box-sizing: border-box;
      .logo {
        width: 48rpx;
        height: 48rpx;
        font-size: 1em;
        display: block;
        position: relative;
        margin: 0.5em auto;
        .img {
        }
      }
      .text {
        font-size: 1em;
        line-height: 1em;
        height: 1em;
        width: 100%;
        display: block;
        white-space: nowrap;
      }
    }
  }
}
</style>
